<template>
  <el-dialog  @close="close"  destroy-on-close :title="title" v-model="visible" :width="width" append-to-body>
    <div :style="{height}" v-if="visible">
      <slot></slot>
    </div>
    <template #footer >
      <div v-if="footer" class="dialog-footer">
        <el-button @click="submit('cancel')">取 消</el-button>
        <el-button :loading="buttonLoading" type="primary" @click="submit('submit')">确 定</el-button>
      </div>
      <slot name="footers"></slot>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, withDefaults, defineProps, defineEmits, defineExpose,nextTick } from 'vue'
// 引入element组件
// const buttonLoading = ref(false)
type Props = {
  width?: string,
  height?: string,
  // 是否自动关闭
  autoClose?: boolean,
  buttonLoading:boolean,
  footer?:boolean
}
const props = withDefaults(defineProps<Props>(), {
  width: '550px',
  height: '400px',
  footer:true
})
const visible = ref(false)
const title = ref('')

const emit = defineEmits(['submit', 'cancel','close'])
const close = () => {
  emit('close')
}
const hide = () => {

  visible.value = false
}
const submit = (type: string) => {
  emit('submit', type)
  if(props.autoClose) {
    close()
    hide()
  }
  if (type === 'cancel') {
    close()

  }
}
const show = (titles: string) => {
  title.value = titles
  visible.value = true
}

defineExpose({
  show,
  hide
})

</script>
<style  lang="scss">
.el-overlay .el-overlay-dialog .el-dialog .el-dialog__header {
  padding: 0;
  padding-bottom: 10px;
}

</style>
